import { View, Text } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import './index.scss'
import Taro from '@tarojs/taro'
import request  from '../../utils/request'
import { useEffect, useState } from 'react';
import moment from 'moment'
import { AtCalendar } from "taro-ui"
import { AtButton } from 'taro-ui'
export default function Index (props) {
  const { id } = Taro.getCurrentInstance().router.params;
  const [detail,setDetail] = useState({});
  const [month,setMonth] = useState(moment().format('YYYY-MM'));
  const [calendarData, setCalendarData] = useState({});
  const [currentDate, setCurrentDate] = useState(moment().format('YYYY-MM-DD'));
  const getDetail = ()=>{
    //admin/login
    request.get('/app/c/course/detail?id='+id).then((res)=>{
      setDetail(res||{} );
    })
  }
  const getmonthCourseCalendar = ()=>{
    //admin/login
    request.post('app/c/lesson//monthCourseCalendar',{
      courseId:id,
      month
    }).then((res)=>{
      console.log(res);
      const ncalendarData = {};
      (res||[]).forEach(item=>{
        
        if( !ncalendarData[item.date]){
          ncalendarData[item.date] = [];
        }
        ncalendarData[item.date].push(item);
      })
      setCalendarData(ncalendarData);
    })
  }
  useDidShow(() => {
    getDetail(id)

  })

  useEffect(()=>{
    getmonthCourseCalendar();
  },[month])
  return (
    <div className='kc-detail-page'>
      <div className="course-item">
        <div className="course-title">{detail.title}</div>
        <div className="course-sub-title">{detail.subTitle}</div>
        <div className="course-brief">{detail.brief}</div>
          <div className="course-brief">教师{detail.teacherId}</div>
        <div className="course-time">{moment(detail.startTime).format('YYYY-MM-DD HH:mm')} - {moment(detail.endTime).format('HH:mm')}</div>
      </div>
      <div style={{marginTop:'20px'}} className="course-item">
        <AtCalendar
          currentDate={currentDate}
          onDayClick={(SelectDate)=>{
            console.log(SelectDate)
            setCurrentDate(SelectDate.value)
          }}
          marks={Object.keys(calendarData).map(date => ({ value: date }))}
          month={month}
          onMonthChange={(e)=>{
            console.log(e)
            setMonth(moment(e).format('YYYY-MM'))
          }}
        />
       
      </div>
       <div>
          {
            (calendarData[currentDate]||[]).map((item,index)=>{
              return <div className="course-item">
                <div className="course-title">{item.lessonName}</div>
                <div className="course-sub-title">{item.roomName}</div>
                <div className="course-time">{item.lessonStartTime} - {item.lessonEndTime}</div>
                <div style={{height:'30px'}}></div>
                <AtButton onClick={()=>{
                    Taro.navigateTo({url:'/pages/yuyue/index?info='+JSON.stringify(item)})
                }}>预约</AtButton>
              </div>
            })

          }
        </div>
    </div>

  )
}
